<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            background: #c3d1ff;
        }

        .list-group .list-group-item {
            cursor: pointer;
        }

        .list-group span {
            margin-right: 10px;
        }
        .glyphicon-chevron-down{
            top: 3px;
            left: 3px;
        }
        a.highLight{
            color: red;
            background: #b2ffb3;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <br>
    <h1>DOM操作</h1>
    <hr>
    <br>
    <div class="well well-sm" id="flutes">请选择一种喜欢的水果：</div>
    <div class="list-group" id="ul">
        <a class="list-group-item list-group-item-success" title="烟台苹果"><span class="badge pull-left">1</span>苹果</a>
        <a class="list-group-item list-group-item-success" title="四川橘子"><span class="badge pull-left">2</span>橘子</a>
        <a class="list-group-item list-group-item-success" title="广西菠萝"><span class="badge pull-left">3</span>菠萝</a>
        <a class="list-group-item list-group-item-success" title="其它水果"><span class="badge pull-left">last</span>其它</a>
    </div>
    <button class="btn btn-warning btn-sm" id="toggleclass">样式切换</button>
    <br>
    <hr>
    <div class="well well-sm">对插入节点的各种方法的尝试：</div>
    <p class="list-group-item list-group-item-warning">我想说：</p>
    <!--<div class="list-group">-->
        <!--<a class="list-group-item list-group-item-danger">你好！</a>-->
    <!--</div>-->
    <br>
    <br>
    <br>

</div>
<script>
    $(function () {
        var $ul = $("#ul.list-group");
        var $juzi = $(".list-group>:eq(1)");
        $juzi.click(function(){
            alert($(this).text());
        })
//        var $other = $("#ul .list-group-item:last");
//        alert("橘子的text：" + $juzi.text());
//        alert("橘子的title：" + $juzi.attr("title"));

        var $xiangjiao = '<a class="list-group-item list-group-item-success" title="海南香蕉"><span class="badge pull-left">4</span> 香蕉</a>';
        var $xueli = '<a class="list-group-item list-group-item-success" title="贵州雪梨"><span class="badge pull-left">5</span> 雪梨</a>';

//        插入节点和移动
//        $ul.append($xiangjiao).append($xueli);
//        $ul.prepend($xiangjiao);
//        $juzi.before($xiangjiao);
//        $juzi.after($xiangjiao);
//        $juzi.appendTo($ul);//橘子移动到列表前部
//        $juzi.prependTo($ul);//橘子移动到列表尾部

        var $p = $("p");
        var $new = '<a class="list-group-item-danger">你好!&nbsp;</a>';
//        各种插入方法
//        $p.append($new);
//        $new.appendTo($p); //为何行不通？
//        $p.prepend($new);
//        $new.prependTo($p); //为何行不通？
//        $p.after($new);
//        $new.insertAfter($p);//为何行不通？
//        $p.before($new);
//        $new.insertBefore($p);//为何行不通？

//        删除节点
/*        $juzi.remove();
        var text = "橘子的text：" + $juzi.text();
        alert(text);    //删除后这个元素还是可以继续使用的*/
//        ！！！注意这个写法，选择器里最后一个参数和remove参数第一个重合
//        $("#ul .list-group-item").remove(".list-group-item[title!=广西菠萝]");
//          detach和remove的区别是，前者删除后再添加，仍然保留了原来的绑定事件，而后者没有
/*        $juzi.remove();
        $ul.append($juzi);
        $juzi.detach();
        $ul.append($juzi);*/
//        $juzi.empty(); //清空节点内部内容，包括所有后代子孙

//        克隆节点
//        $juzi.clone().appendTo($ul);
//        $juzi.clone(true).appendTo($ul);//true表示克隆后的节点具有源节点绑定的事件

        //替换节点
        var $flutes = $("#flutes");
//        $flutes.replaceWith('<div class="well well-sm" id="flutes">请选择一种不喜欢的水果：</div>');
//        $('<div class="well well-sm" id="flutes">请选择一种不喜欢的水果：</div>').replaceAll($flutes);

        //包裹节点
        var $lis = $(".list-group-item");
//        $lis.wrap("<b></b>");
//        $lis.wrapAll("<b></b>");//此举可能会破坏其他样式
//        $lis.wrapInner("<b></b>");

//        属性操作
        var juziTitle;
/*        juziTitle = $juzi.attr("title");
        juziTitle =$juzi.attr("title","橘子的新title！").attr("title");
        juziTitle =$juzi.removeAttr("title","橘子的新title！").attr("title");
        alert(juziTitle);*/

        //样式操作
        var juziClass;
//        juziClass = $juzi.attr("class");
//        juziClass = $juzi.attr("class","highLight").attr("class");
//        juziClass = $juzi.attr("class","list-group-item list-group-item-success highLight").attr("class");
//        juziClass = $juzi.addClass("highLight").attr("class");
//        juziClass = $juzi.removeClass("highLight").attr("class");
//        juziClass = $juzi.removeClass("list-group-item-success highLight").attr("class");
//        juziClass = $juzi.removeClass().attr("class");
//        alert(juziClass);
//        样式切换及判断
       var $boluo = $("#ul a:contains(菠萝)");
        $("#toggleclass").click(function(){
            $boluo.toggleClass("highLight");
            if ($boluo.hasClass("highLight"))
                    alert("现在高亮显示！")
        })

//        获取html
//        alert($juzi.html());
        alert($juzi.text());//包括所有子元素的文本
    })

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>